Skip to content

LONDON | MAY | KOKUL | WIREFRAME #665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

Kokul-vathany
Copy link

@Kokul-vathany Kokul-vathany commented May 31, 2025

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Copy link

netlify bot commented May 31, 2025

Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit d641cf8
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/684459691c17520008943e25
😎 Deploy Preview https://deploy-preview-665--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 96 (🔴 down 4 from production)
SEO: 86 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@cjyuan
Copy link
Contributor

cjyuan commented Jun 2, 2025

Both of your PRs do not have a "Needs review" label. As such, the volunteers won't recognise them as being "ready to be reviewed".

Until you're able to add a label, here are some actions you can take to further improve your implementation and your PR (in order to speed up the review process):

  1. Follow the suggestions in the "PR Essentials" guide on the Canvas in the #cyf-code-review channel. It has some helpful tips to make your PRs more robust and ready for review.

  2. Ask AI tools for suggestions. For example, you can ask ChatGPT

review HTML code:
...        <--- paste your HTML code here

Then take a look at the suggestions it gives you, and pick out the ones that actually make sense for your project. It's a also great way to learn and improve your work.

@Kokul-vathany Kokul-vathany changed the title LONDON | MAY | KOKULAVATHANY | WIREFRAME LONDON | MAY | KOKUL | WIREFRAME Jun 6, 2025
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code is error free. Good job.

  1. When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. You're off to a solid start. To better align with the wireframe, can you align the high of the images in the last two articles?

  2. One of the acceptance criteria, "The page footer is fixed to the bottom of the viewport", has not yet been satisfied. Can you make the necessary change? (Suggestion: Ask ChatGPT what that requirement means or look up what "viewport" means).

  3. Can you improve the Lighthouse Accessibility score of your page to 100?

  4. To follow best practices, can you carry out the following actions?

    • Check the items in the Self-Checklist to confirm your pull request meets the guidelines
    • Provide a brief description (under the "Changelist" section) summarizing the purpose of the PR and the changes you’ve made

Comment on lines -22 to +21
voluptates. Quisquam, voluptates.
The primary purpose of a wireframe is to outline the basic structural design and user experience of a website or application before any detailed design work is done. It's a visual representation of the layout, content, and functionality, helping designers, developers, and stakeholders understand the overall structure and flow.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The long text line at line 21 can be better formatted as:

          The primary purpose of a wireframe is to outline the basic structural
          design and user experience of a website or application before any
          detailed design work is done. It's a visual representation of the
          layout, content, and functionality, helping designers, developers, and
          stakeholders understand the overall structure and flow.

To understand why, you can ask ChatGPT these questions:

  • How HTML treat mutliple whitespace characters in text?
  • What's the advantage of not writing a long paragraph of text in a single line in HTML?

VSCode's "Format Document" feature can help us format our code for better readability and consistency, including breaking a long line of text into shorter lines of text.
To use the feature, right-click inside the code editor and select the option.
Please note that if there are syntax errors in the code, the "Prettier" extension may not format HTML code properly.

@cjyuan cjyuan added the Reviewed Volunteer to add when completing a review label Jun 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Reviewed Volunteer to add when completing a review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants